<template>
	<view class="yg-pay">
		<view class="yg-pay-content">
			<view class="pay-content-address">
				<view v-if="!address.userName" class="content-address-checked">
					<view  class="content-address-btn" @click="handleAddress">
						选择地址
					</view>
				</view>
				<view v-else class="content-address-info">
					<view class="content-address-address">
						{{address.provinceName+address.cityName+address.countyName+address.detailInfo}}
					</view>
					<view class="content-address-user">
						<view class="address-user-left">
							<text class="name">{{address.userName}}</text>
							<text>{{address.telNumber}}</text>
						</view>
					<button type="default" size="mini" plain="true" @click="handleAddress">重新选择地址</button>
					</view>
				</view>
			</view>
			<view class="pay-content-list">
				<view class="pay-content-title">
					已选商品
				</view>
				<view class="pay-content-item" v-for="item in carts" :key="item.goods_id">
					<view class="content-item-left">
						<image :src="item.goods_big_logo" ></image>
					</view>
					<view class="content-item-right">
						<view class="item-right-title">
							{{item.goods_name}}
						</view>
						<view class="item-right-bottom">
							<view class="right-bottom-price">
								￥{{item.goods_price}}
							</view>
							<view class="right-bottom-num">
								x{{item.num}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="yg-pay-bottom">
			<view class="pay-bottom-left">
				合计: <view class="price">
					￥{{totalPrice}}
				</view>
			</view>
			<view v-if="address.userName" class="pay-bottom-btn" @click="handlePay">
				去支付({{totalNum}})
			</view>
			<view v-else class="pay-bottom-disabled">
				去支付({{totalNum}})
			</view>
		</view>
	</view>
</template>

<script>
	import {requestPayment} from '@/utils/asyncWx.js'
	export default {
		data() {
			return {
				carts:uni.getStorageSync('carts').filter(v=>v.checked)||[],
				address:uni.getStorageSync('address')|| {}
			};
		},
		computed:{
			totalNum(){
				return this.carts.reduce((total,item)=>{
					return total+item.num
				},0)
			},
			totalPrice(){
				return this.carts.reduce((total,item)=>{
					return total+item.num*item.goods_price
				},0)
			}
		},
		methods:{
			// 去支付按钮点击事件
			async handlePay(){
				let token =uni.getStorageSync('token')||''
				// 先判定有没有token，没有就去授权页面获取再支付流程，有就继续支付流程
				if(!token){
					uni.navigateTo({
						url:'/pages/auth/auth'
					})
					return
				}
				console.log('继续支付流程')
				// 创建订单，获取订单编号的参数
				let order_price=this.totalPrice
				let consignee_addr=this.address.provinceName+this.address.cityName+this.address.countyName+this.address.detailInfo
				let goods=this.carts.map(item=>{
					return {
						goods_id:item.goods_id,
						goods_number:item.num,
						goods_price:item.goods_price
					}
				})
				// console.log(goods,111)
				// 发送请求获取订单编号
				let res=await this.$request({
					url:'my/orders/create',
					method:"post",
					header:{
						Authorization:token
					},
					data:{
						order_price,
						consignee_addr,
						goods
					}
				})
				// console.log(res)
				const {order_number}=res.message
				// 获取支付参数
				let payRes= await this.$request({
					url:"my/orders/req_unifiedorder",
					method:"post",
					header:{
						Authorization:token
					},
					data:{
						order_number
					}
				})
				console.log(payRes)
				const {pay}=payRes.message
				// 调用封装好的支付函数
				await requestPayment(pay)
				// 查看订单支付状态
				await this.$request({
					url:"my/orders/chkOrder",
					method:"post",
					header:{
						Authorization:token
					},
					data:{
						order_number
					}
				})
				// 处理已经支付的商品并重新储存
				let newCarts=(uni.getStorageSync('carts')||[]).filter(v=>!v.checked)
				uni.setStorageSync('carts',newCarts)
				// 跳转到订单页面
				uni.navigateTo({
					url:"/pages/order/order"
				})
			},
			// 选择地址点击事件
			handleAddress(){
				uni.chooseAddress({
					success: (res) => {
						console.log(res)
						this.address=res
						uni.setStorageSync('address',this.address)
					},
					fail:(err)=> {
						console.log(err)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.yg-pay{
		.yg-pay-content{
			height: calc(100vh - 90rpx);
			overflow-y: scroll;
			padding: 20rpx;
			.pay-content-address{
				height: 200rpx;
				background-color: #FFFFFF;
				.content-address-checked{
					display: flex;
					justify-content: center;
					align-items: center;
					.content-address-btn{
						line-height: 90rpx;
						width: 300rpx;
						text-align: center;
						border: 2px solid #EA4350;
						border-radius: 45rpx;
					}
				}
				.content-address-info {
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					padding: 0 30rpx;
				  .content-address-address {
				
				  }
				
				  .content-address-user {
					  font-size: 24rpx;
					  display: flex;
					  justify-content: space-between;
					  .address-user-left{
						text.name {
							margin-right: 30rpx;
						}
					}
						button {
						
							}
						}
					  }
			}
			.pay-content-list {
				margin-top: 20rpx;
				background-color: #fff;
				padding: 20rpx;
			  .pay-content-title {
				line-height: 60rpx;
				font-size: 30rpx;
			  }
			
			  .pay-content-item {
				  display: flex;
			    .content-item-left {
					flex: 1;
					height: 200rpx;
					display: flex;
					justify-content: center;
					align-items: center;
			      image {
					width: 190rpx;
					height: 190rpx;
					margin-right: 20rpx;
			      }
			    }
			
			    .content-item-right {
					flex: 2;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					 font-size: 26rpx;
			      .item-right-title {
					  display: -webkit-box;
					  -webkit-box-orient: vertical;
					  -webkit-line-clamp: 2;
					  overflow: hidden;
			      }
			
			      .item-right-bottom {
					  display: flex;
					  justify-content: space-between;
					  align-items: center;
			        .right-bottom-price {
					  color: #eb4450;
			        }
			
			        .right-bottom-num {
			
			        }
			      }
			    }
			  }
			}
		}
		.yg-pay-bottom{
			height: 90rpx;
			border-top: 2px solid #ddd;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			font-size: 26rpx;
			.pay-bottom-left {
				display: flex;
			  .price {
				margin-left: 10rpx;
				color: #eb4450;
			  }
			}
			
			.pay-bottom-btn {
				border-radius: 25rpx;
				height: 50rpx;
				width: 160rpx;
				background-color: #eb4450;
				color: white;
				text-align: center;
				line-height: 50rpx;
			}
			.pay-bottom-disabled {
				border-radius: 25rpx;
				height: 50rpx;
				width: 160rpx;
				background-color: #c3c3c3;
				color: white;
				text-align: center;
				line-height: 50rpx;
			}
		}
	}
</style>
